<!-- 付款 -->
<template>
  <div class="payment-container">
    <div class="main">
      <div class="top">
        <div class="icon">
          <Icon type="rightarrow" @click="closePay" />
        </div>
        <p class="title">付款中心</p>
      </div>
      <div class="content">
        <div class="selectPayment">
          <p class="prompt">付款方式:</p>
          <p class="text">支付宝</p>
        </div>
        <div class="QRcode" v-if="QRcodeRef">
          <iframe :src="QRcodeRef"></iframe>
        </div>
        <div class="mongolian" v-if="transactionState">
          {{ transactionState }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { io } from "socket.io-client";
import Icon from "@/components/Icon/index.vue";
import { computed, onMounted, onUnmounted, ref } from "vue";
import { useCheckInStore } from "@/store/useCheckInStore.js";
import { useUserStore } from "@/store/useUserStore.js";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
const router = useRouter();
const store = useCheckInStore();
const { readCheckInfo } = storeToRefs(store);
const { getUserInfo } = useUserStore();
import { getQRCode, queryOrder, checkIn } from "@/api/user.js";
const QRcodeRef = ref(0);
const transactionState = ref("");
const checkInInfo = computed(() => {
  return {
    bednumberId: readCheckInfo.value.bednumber.id,
    subject: `${readCheckInfo.value.dormitory.DormitoryName}/${readCheckInfo.value.floor.floorNumber}/${readCheckInfo.value.room.roomNo}/${readCheckInfo.value.bednumber.bednumberId}`,
    payMoney: readCheckInfo.value.dormitory.RoomRate.price,
    peopleNum: readCheckInfo.value.dormitory.fewPeople,
    roomNoId: readCheckInfo.value.room.id,
  };
});
console.log("checkInInfo", readCheckInfo.value);
const socketRef = ref();
// 建立webscoket连接
onMounted(async () => {
  const { data } = await getQRCode(checkInInfo.value);
  QRcodeRef.value = data.resulet;
  socketRef.value = io("http://localhost:8081", {
    autoConnect: true, // 自动连接
  });
  socketRef.value.on("test", async (chunk) => {
    if (chunk.code === 4003) {
      transactionState.value = "以扫码";
    } else if (chunk.code === 4000) {
      transactionState.value = "已支付";
      socketRef.value.disconnect();
      const res = await checkIn({
        OrderNo: data.Order,
        dormitoryId: readCheckInfo.value.dormitory.id,
        floorID: readCheckInfo.value.floor.id,
        roomNoId: readCheckInfo.value.room.id,
        bednumberId: readCheckInfo.value.bednumber.id,
      });
      console.log("data",res.data);
      if (res.data) {
        await getUserInfo();
        router.push({
          name: "fun",
        });
        ElMessage({
          message: "入住成功",
          type: "success",
        });
      }
      
    } else if (chunk.code === 4002) {
      transactionState.value = "超时";
      socketRef.value.disconnect();
    }
  });
  // 关闭连接后触发
  socketRef.value.on("disconnect", () => {
    transactionState.value = "";
  });
  await queryOrder(data.Order);
});
const emit = defineEmits(["closePay"]);
const closePay = () => {
  emit("closePay");
};
onUnmounted(() => {
  //关闭连接
  socketRef.value.disconnect();
});
</script>

<style lang='less' scoped>
@import "@/styles/mixin.less";
@import "@/styles/var.less";
.payment-container {
  background-color: rgba(28, 35, 39, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;

  .main {
    .self-center();
    background-color: #fff;
    border-radius: 10px;
    width: 50%;
    height: 50%;
    color: #000;
    padding: 5px;
    .top {
      position: relative;
      font-size: 20px;
      .icon {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        cursor: pointer;
      }
      .title {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
      }
    }

    .content {
      .self-center();
      width: 200px;
      height: 200px;
      position: relative;
      .selectPayment {
        display: flex;
        align-content: center;
        font-size: 14px;
        .prompt {
          margin-right: 10px;
        }
      }
      .QRcode {
        display: flex;
        flex-wrap: nowrap;
        margin: 10px 0;
      }
      iframe {
        width: 110px;
        height: 110px;
        border: 0;
        overflow: hidden;
      }
      .mongolian {
        position: absolute;
        left: 0;
        top: 20px;
        width: 110px;
        height: 110px;
        background-color: rgba(255, 255, 255, 0.9);
        // backdrop-filter: blur(5px);
        text-align: center;
        line-height: 110px;
      }
    }
  }
}
</style>